<template>
	<view class="homestay-detail">
		<!-- 顶部导航栏 -->
		<!-- <view class="navbar" :style="{ backgroundImage:  `url('${(detail.coverImage)}')`  }"> -->
		<view class="navbar" :style="backgroundImageStyle">
			<view class="nav-left" @click="goBack">
				<u-icon name="/static/images/icon/back.png" size="50"></u-icon>
				<text class="back-icon"></text>
			</view>
			<view class="nav-right">
				<u-icon name="/static/images/icon/share.png" size="50"></u-icon>
			</view>
		</view>

		<scroll-view class="content" scroll-y>
			<!-- <view class="down" :style="{ backgroundImage:  `url('${(detail.coverImage)}')`  }"> -->
			<view class="down" :style="backgroundImageStyle">
			</view>

			<view class="info-section">
				<u-row class="title">
					<view class="hotel-title">{{ detail.name }}
					</view>
					<view class="grade">
						5A
					</view>
				</u-row>

				<u-row class="population">
					<text class="rate">4.8分</text>
					<text class="indocument">15635点评 ▸</text>

					<text class="photo">相册 | 游记</text>
				</u-row>
				<view class="card" style="display: flex;">
					<view class="image_left"
						style="background-color: #EEF9F7; display: flex;width: 50%;margin-right: 6rpx;border-radius: 12rpx;">
						<view style="display: flex;flex-direction: column; ">
							<text style="font-weight:600;color:#05B288;padding: 10rpx;">开园中</text>
							<text style="padding: 10rpx">今日（周五）</text>
							<text style="padding: 10rpx">08:30-16:30开放</text>
						</view>
						<text
							style="color: #6799F9;width: 20%;align-items:center;display: flex;padding-left: 25rpx;margin-right: -15rpx;">景点详情</text>
						<u-icon name="/static/images/icon/right.png" style="padding-right:10rpx;"></u-icon>
					</view>
					<view class="image_right"
						style="background-color: #EEF2FD;display:flex; width:50%;margin-left: 6rpx;border-radius: 12rpx;">
						<view style="display: flex;flex-direction: column;width: 80%;">
							<text style="padding: 10rpx;">{{detail.address}}</text>
						</view>
						<view style="margin-top: 25rpx;">
							<u-icon name="/static/images/icon/map_tag.png" style="" size="60"></u-icon>
							<text style="">地图</text>
						</view>
					</view>
				</view>
				<view class="announcement"
					style="border-radius: 12rpx; height: 60rpx; display: flex;margin-top: 20rpx;margin-bottom: 20rpx;background: #FFF1F1;">
					<u-icon name="/static/images/icon/warning.png"
						style="padding-right: 20rpx;padding-left: 20rpx"></u-icon>
					<text style="color: red;letter-spacing: 2rpx;line-height:64rpx ;flex-grow: 1;">公告：入园公告</text>
					<u-icon name="/static/images/icon/right.png" size="10px" style=" padding-right: 20rpx;"></u-icon>
				</view>
				<u-divider style="margin-left: -40rpx; margin-right: -40rpx; width: auto;"></u-divider>
				<view style="display: flex;">
					<u-tag v-for="(tag, index) in tagss" :key="index" :text="tag" bg-color="#F5F5F5" color="black"
						border-color="white" shape="circle" style="padding: 10rpx;" size="large"></u-tag>
				</view>
			</view>

			<!-- 房型列表 -->
			<view class="room-list">
				<view style="display: flex;flex-direction: column;">
					<text style="font-weight: 700;font-size: 44rpx;margin: 10rpx;">门票</text>
					<text style="font-size: 28rpx;color:#FF9900;margin: 10rpx;">优待政策></text>
					<text style="font-size: 28rpx;color:#999999;margin: 10rpx;margin-bottom: 40rpx;">累计销量5.1万+</text>

				</view>
				<view v-for="room in detail.homestayRoomList" :key="room.rooId" class="room-item">
					<image :src="room.roomImage" class="room-image" mode="aspectFill" />
					<view class="room-info">
						<view class="room-title">{{ room.roomType }}
							<view class="room-price">
								<text class="price-symbol">¥</text>
								<text class="price-value">{{ room.price }}</text>
							</view>
						</view>

						<!-- 标签 -->
						<view class="item-tags">
							<text v-for="(tag, idx) in room.tags" :key="idx" class="item-tag">
								{{ tag }}
							</text>
						</view>

					</view>
					<view class="book-btn" @click="bookRoom(room)">预订</view>
				</view>
			</view>
			<!-- 达人游记 -->
			<view style="background: #F7F7F7;display: flex;flex-direction: column;">
				<text style="font-weight: 600;font-size: 30rpx;margin: 30rpx; margin-top: 30rpx;">达人游记</text>
				<view class="content-list">
					<content-card v-for="item in contentList" :key="item.homeId" :item="item" />
				</view>
			</view>

		</scroll-view>
		<!-- 底部评论区 -->
		<view
			style="padding-top: 10rpx; position: fixed; bottom: 0;  left: 0; right: 0;background-color: white;height: 100rpx;display: flex;padding: 0 20rpx; box-shadow: 0 -2rpx 10rpx rgba(0,0,0,0.1); z-index: 999;">
			<u--input :custom-style="{ backgroundColor: '#F5F5F5',
				height:'40px',
				width:'300px',
				margin:'20rpx'
				
				 }" border="none" shape="circle" color="#999999" placeholder="写评论..." prefixIcon="edit-pen"
				prefixIconStyle="font-size: 22px;color: #909399"></u--input>
			<view style="display: flex;flex-direction: column;padding: 20rpx;">
				<u-icon name="/static/images/icon/love.png" style="justify-content: center"></u-icon>
				<text>已收藏</text>
			</view>
			<u-button text="前往预定" icon="/static/images/icon/up.png"
				color="linear-gradient(90deg, #4e73df 0%, #02a7f0 100%)"></u-button>
		</view>
	</view>
</template>

<script>
	import {
		homeDetail
	} from "@/api/system/homestay.js";
	import {
		contentList
	} from "@/api/system/homestay.js";
	import config from "@/config";

	export default {
		data() {
			return {
				tagss: ["订今日", "订明日", "订11月27日", "更多日期>"],
				baseUrl: config.baseUrl,
				detail: {},
				checkInDate: "",
				checkOutDate: "",
				contentList: {},
				backgroundImageStyle: "", // 新增变量存储背景样式
			};
		},
		onLoad(options) {
			// 从列表页获取,民宿ID
			const id = options.id;
			// 动态获取当天和下一天的日期                         
			const today = new Date();
			const tomorrow = new Date();
			tomorrow.setDate(today.getDate() + 1);
			const format = (d) => `2025-${d.getMonth() + 1}-${d.getDate()}日`;
			this.checkInDate = format(today);
			this.checkOutDate = format(tomorrow);
			// TODO: 根据ID获取酒店详情
			if (id) {
				this.getHomeDetail(id);
			}
		},
		created() {
			this.getContentList();
		},
		methods: {
			getContentList() {
				contentList().then((res) => {
					// 处理图片路径和标签
					this.contentList = res.rows
					this.contentList.forEach(item => {
						item.coverImage = 'http://101.34.184.250:8080' + item.coverImage
						item.tags = this.formatTags(item.tags)
					})
				})
			},
			// 添加标签格式化方法
			formatTags(tags) {
				if (typeof tags === "string") {
					try {
						const arr = JSON.parse(tags)
						return Array.isArray(arr) ?
							arr.map(tag => String(tag).replace(/^[\[\s'"]+|[\]\s'"]+$/g, "")) :
							tags.split(",").map(tag => tag.trim())
					} catch {
						return tags.split(",").map(tag => tag.trim())
					}
				}
				return tags
			},
			getHomeDetail(id) {
				homeDetail(id).then((res) => {
					this.detail = res.data;
					this.detail.coverImage = this.baseUrl + this.detail.coverImage;
					this.backgroundImageStyle = `background-image: url('${this.detail.coverImage}');`;
					this.detail.homestayRoomList.forEach((item) => {
						item.roomImage = this.baseUrl + item.roomImage;
						// item.tags = item.tags.split(",");
						// 处理标签字段，保证为数组
						if (typeof item.tags === "string") {
							try {
								// 尝试解析为JSON数组
								const arr = JSON.parse(item.tags);
								if (Array.isArray(arr)) {
									item.tags = arr.map((tag) =>
										String(tag).replace(/^[\[\s'"]+|[\]\s'"]+$/g, "")
									);
								} else {
									item.tags = item.tags
										.split(",")
										.map((tag) => tag.replace(/^[\[\s'"]+|[\]\s'"]+$/g,
											""));
								}
							} catch {
								item.tags = item.tags
									.split(",")
									.map((tag) => tag.replace(/^[\[\s'"]+|[\]\s'"]+$/g, ""));
							}
						}
					});
				});
			},
			goBack() {
				uni.navigateBack({
					delta: 1,
				});
			},
			bookRoom(room) {
				uni.navigateTo({
					url: `/pages/pay/booking?homeId=${this.detail.homeId}&homestayName=${this.detail.name}&roomId=${room.roomId}&roomType=${room.roomType}&checkInDate=${this.checkInDate}&checkOutDate=${this.checkOutDate}&price=${room.price}`,
				});
			},
		},
	};
</script>

<style scoped>
	.item-tags {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
		margin-bottom: 12px;
	}

	.item-tag {
		font-size: 12px;                  
		background: #f5f5f5;
		padding: 4px 10px;
		border-radius: 6px;
		box-shadow: none;
		margin-bottom: 4px;
		margin-right: 4px;
		display: inline-block;
		min-width: 40px;
		text-align: center;
	}
 
	.homestay-detail {
		min-height: 100vh;
		background: #f5f5f5;
	}

	.navbar {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		display: flex;
		justify-content: space-between;
		padding: 44px 16px 1px;
		z-index: 100;
		height: 150rpx;
		background-size: 100% 500rpx;
	}

	.nav-right {
	}


	.down {
		height: 350rpx;
		background-size: 100% 500rpx;
		background-position: bottom;
	}

	.main-image {
		width: 100%;
		height: 100%;
	}

	.content {
		background: #fff;
		margin-top: 80px;
		padding-bottom: 57px;
	}

	.content-bottom {
		margin-top: -24rpx;

	}

	.nav-title {
		font-size: 18px;
		font-weight: 500;
		color: #333;
		max-width: 60%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}


	.info-section {
		border-top-left-radius: 40rpx;
		border-top-right-radius: 40rpx;
		background: #fff;
		padding: 16px;
		margin-top: -14px;
	}


	.hotel-title {
		font-size: 25px;
		font-weight: bold;
		color: #333;
	}

	.grade {
		background-color: #F2F2F2;
		color: #666666;
		width: 50rpx;
		height: 30rpx;
		border-radius: 10rpx;
		text-align: center;
		font-size: 20rpx;
		line-height: 32rpx;
		margin-left: 20rpx;
		margin-bottom: -8rpx;
	}

	.rate {
		background: linear-gradient(90deg, #4e73df 0%, #02a7f0 100%);
		border-top-left-radius: 40rpx;
		border-bottom-left-radius: 40rpx;
		color: white;
		padding: 11rpx;
		font-size: 25rpx;
	}

	.indocument {
		background: #EBF6FF;
		border-top-right-radius: 40rpx;
		border-bottom-right-radius: 40rpx;
		color: #3478F6;
		padding: 11rpx;
		font-size: 25rpx;
	}

	.population {
		padding-top: 20rpx;
		padding-bottom: 20rpx;
	}



	.photo {
		background: #EBF6FF;
		border-radius: 40rpx;
		color: #3478F6;
		padding: 11rpx;
		margin-left: 30rpx;
		font-size: 25rpx;
	}


	.location-row,
	.contact-row {
		display: flex;
		align-items: center;
		margin-bottom: 8px;
	}

	.location-icon,
	.phone-icon {
		font-size: 16px;
		margin-right: 6px;
	}

	.location-text,
	.phone-text {
		font-size: 14px;
		color: #666;
		flex: 1;
	}

	.distance {
		font-size: 14px;
		color: #007aff;
	}

	.date-section {
		background: #fff;
		padding: 16px;
		margin-bottom: 8px;
	}

	.date-row {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.date-item {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.date-label {
		font-size: 14px;
		color: #999;
	}

	.date-value {
		font-size: 16px;
		font-weight: bold;
		color: #333;
		margin: 4px 0;
	}

	.date-week {
		font-size: 12px;
		color: #666;
	}

	.date-separator {
		margin: 0 24px;
		color: #999;
		font-size: 20px;
	}

	.room-list {
		background: #F4F9FF;
		padding: 8px 16px;
		border-top-right-radius: 40rpx;
		border-top-left-radius: 40rpx;
		margin-top: -16rpx;

	}

	.room-item {
		background: #fff;
		border-radius: 12px;
		margin-bottom: 16px;
		overflow: hidden;
		display: flex;
		position: relative;
		padding: 12px;
	}

	.room-image {
		width: 120px;
		height: 120px;
		object-fit: cover;
		border-radius: 8px;
	}

	.room-info {
		flex: 1;
		padding: 0 12px;
		position: relative;
	}

	.room-title {
		font-size: 16px;
		font-weight: 500;
		color: #333;
		margin-bottom: 8px;
	}

	.room-tags {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
		margin-bottom: 12px;
	}

	.room-tag {
		font-size: 12px;
		color: #666;
		background: #f5f5f5;
		padding: 4px 8px;
		border-radius: 4px;
	}

	.room-price {
		display: flex;
		align-items: baseline;
		position: absolute;
		bottom: 0;
		left: 12px;
	}

	.price-symbol {
		font-size: 14px;
		color: #ff4d4f;
	}

	.price-value {
		font-size: 24px;
		font-weight: bold;
		color: #ff4d4f;
	}

	.book-btn {
		position: absolute;
		bottom: 12px;
		right: 12px;
		background: #007aff;
		color: #fff;
		padding: 6px 16px;
		font-size: 14px;
		font-weight: 500;
		border-radius: 4px;
	}

	.content-list {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 24rpx;
		margin: 0rpx 30rpx;
		background: #f7f7f7;
	}

	/deep/ .u-button {
		width: 100px;
		margin: 20rpx;
	}
</style>